The present invention relates to Cascading Style Sheet (CSS), and more specifically, to a method and a system for automatic detection of CSS conflicts.
CSS is a computer language for expressing styles of files such as HTML or XML. CSS is a style design language that is able to really achieve separation of web page expression and content at present, wherein HTML or XML, etc is used to specify content and CSS is used to specify expression of the content in web pages. In comparison with conventional HTML expression, CSS is able to make a precise control of the position layout of objects in a web page in a pixel level.
CSS defines how to display elements of HTML or XML, like the font tag and the color property of HTML do. Styles are usually saved in an external .css file (for example, an external style sheet). By only editing a simple CSS document, the external style sheet enables simultaneous change in layouts and appearances of all pages of a site. Since it is allowed to control styles and layouts of a plurality of pages, CSS may be considered a breakthrough in the WEB design field. As a developer of a website, one can define a style for each HTML element and apply it to any desired number of pages. If global update is needed, it is only necessary to change the style simply. Then, all elements in the website are automatically updated.
CSS allows specifying style information in various ways. The style may be specified in a single HTML element, in a header element of an HTML page, or in an external CSS file. Even a plurality of external style sheets may be referred to in a same HTML document. Generally, all styles will be cascaded in a new virtual style sheet in the following priority order (ascending priority): browser default setting, external style sheet, internal style sheet (inside <head> tag), inline style (inside an HTML element). Here, the inline style (inside an HTML element) has the highest priority, which means that it will be prioritized over the following style declarations when they co-exit: the style declaration in <head> tag, the style declaration in the external style sheet, or the style declaration in the browser (default values).
In an HTML page, a widget's look and feel are defined and regulated by a set of CSSs which are shipped together with a widget library. However, when a widget is put into a complex page environment where higher priority CSSs exist, the CSS of the widget might be overridden unexpectedly, thus the widget's original look and feel is broken. Sometimes even functionality is broken too. Herein, a case where the original CSSs are overridden unexpectedly is referred to as CSS conflicts.
Occurrence of CSS conflicts is caused by the following reasons: 1) the application or page developer and the widget developer are usually different persons. The page developer does not fully understand the inner logic of a widget, thus not be able to avoid overriding widget's CSS; and 2) HTML has the dynamic nature, and CSS override happens at the runtime. Therefore, it is very difficult to detect the override at the time of authoring.
In the prior art, only after the widget's original look and feel are broken at the runtime, the developer would realize existence of CSS conflicts, and it is necessary to examine codes manually to find CSS rules that cause conflicts, to eliminate the CSS conflicts. When the page environment is complex, it is very time-consuming and laborious work.